 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">收款账号</div>
      </div>
      <div class="content-con">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="150" class="payee-item">
          <Form-item label="收款人姓名" prop="name">
            <i-input v-model="formValidate.name" size="large" placeholder="请输入姓名"></i-input>
          </Form-item>
          <Form-item label="收款账号" prop="account">
            <i-input v-model="formValidate.account" size="large" placeholder="请输入收款账号"></i-input>
          </Form-item>
          <Form-item label="收款银行" prop="bank">
            <i-input v-model="formValidate.bank" size="large" placeholder="收款银行"></i-input>
          </Form-item>
          <Form-item label="总金额（元）" prop="money">
            <i-input v-model="formValidate.money" size="large" placeholder="总金额（元）"></i-input>
          </Form-item>
          <Form-item label="状态" prop="statu">
            <Radio-group v-model="formValidate.statu" size="large">
              <Radio label="start">
                  <span>开启</span>
              </Radio>
              <Radio label="stop">
                  <span>关闭</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <div class="ban-btn">
            <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          </div>
        </i-form>
        <!-- <div class="form-item">
          <div class="item-list"
          v-for="(payee,index) in payeeData"
          :key='payee.id'>
            <Row :gutter="24" v-if="index == 4">
              <i-col span="4" class="list-name"><span>{{payee.title}}</span></i-col>
              <i-col span="20">
                <Radio-group :model.sync="statu" style="padding-top: 8px;">
                  <Radio size="large" value="开启">开启</Radio>
                  <Radio size="large" value="关闭">关闭</Radio>
                </Radio-group>
              </i-col>
            </Row>
            <Row :gutter="24" v-else>
              <i-col span="4" class="list-name"><span>{{payee.title}}</span></i-col>
              <i-col span="20">
                <i-input :value.sync="payee.value" size="large" :placeholder="payee.place"></i-input>
              </i-col>
            </Row>
          </div>
        </div> -->
        <!-- <div class="ban-btn">
          <i-button class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </div> -->
      </div>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'payee-edit',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       // value: '',
       // statu:'开启',
       formValidate:{
         name: '测试001',
         account: '111',
         bank: '浦发银行',
         money: '30000',
         statu: 'start'
       },
       ruleValidate:{
         name:[
           {
             required: true,
             message: '请输入姓名',
             trigger: 'blur'
           }
         ],
         account:[
           {
             required: true,
             message: '请输入收款账号',
             trigger: 'blur'
           }
         ],
         bank:[
           {
             required: true,
             message: '收款银行',
             trigger: 'blur'
           }
         ],
         money:[
           {
             required: true,
             message: '总金额（元）',
             trigger: 'blur'
           }
         ],
         statu:[
           {
             required: true,
             message: '请选择状态',
             trigger: 'change'
           }
         ]
        }
       // payeeData: [
       //   {
       //     title: '收款人姓名',
       //     value: '测试001',
       //     place: '请输入姓名'
       //   },
       //   {
       //     title: '收款账号',
       //     value: '111',
       //     place: '请输入收款账号'
       //   },
       //   {
       //     title: '收款银行',
       //     value: '浦发银行',
       //     place: '收款银行'
       //   },
       //   {
       //     title: '总金额（元）',
       //     value: '30000',
       //     place: '总金额（元）'
       //   },
       //   {
       //     title: '状态',
       //     value: ''
       //   }
       // ]
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'account_payee'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">
     .payee-item .ivu-form-item-label{
       font-size: 14px;
     }
 </style>
